<template>
  <view class="guide-container">
    <view class="guide-main">
      <view class="title">
        Step1：
      </view>
      <view class="row">
        进入11对战平台公众号：点击小程序右上角【...】-进入小程序资料页-点击相关公众号【11对战平台】or直接微信搜索 11对战平台公众号
      </view>
      <image src="https://img.5211game.com/Base/xiaochengxu/static/step1.png" @click="clickImg('https://img.5211game.com/Base/xiaochengxu/static/step1.png')" mode="widthFix"></image>
    </view>
    <view class="guide-main">
      <view class="title">
        Step2：
      </view>
      <view class="row">
       11对战平台公众号页面点击【服务】-我的妖妖【绑定账号】
      </view>
      <image src="https://img.5211game.com/Base/xiaochengxu/static/step2.png" @click="clickImg('https://img.5211game.com/Base/xiaochengxu/static/step2.png')" mode="widthFix"></image>
    </view>
    <view class="guide-main">
      <view class="title">
        Step3：
      </view>
      <view class="row">
        账号绑定页面-输入需要绑定的11平台主账号和密码，登录后即可绑定成功
      </view>
      <image src="https://img.5211game.com/Base/xiaochengxu/static/step3.png" @click="clickImg('https://img.5211game.com/Base/xiaochengxu/static/step3.png')" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
    methods:{
      clickImg(urlImg) {
      				uni.previewImage({
      					urls: [urlImg], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
      					current: '', // 当前显示图片的http链接，默认是第一个
                indicator:'default',
                	loop:true,
      					success: function(res) {},
      					fail: function(res) {},
      					complete: function(res) {},
      				})
      			},
    }
  }
</script>

<style lang="scss">
body{
  background-color:#fff;
}
.guide-container{
  width:100%;
  overflow: hidden;
  zoom:1;
  padding-top:20rpx;
  .guide-main{
    width:684rpx;
    margin:0 auto;
    overflow: hidden;
    zoom:1;
    .title{
      width:100%;
      text-align: left;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #F39804;
      margin-bottom:10rpx;
    }
    .row{
      width:100%;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
        margin-bottom:20rpx;
      line-height:40rpx;
    }
    image{
      width:100%;
    }
  }
}
</style>
